@primaryColor: #f66e2c;

.ym_register_person_modal {
    display: flex;
    flex-flow: row nowrap;

    &_left {
        flex: 0 0 320px;
        height: 440px;
        overflow: hidden;
        background: #f8f8f8;
        box-sizing: border-box;
        padding: 0 12px;
        display: flex;
        flex-direction: column;

        &_flag {
            line-height: 32px;
            color: #333;
            font-size: 14px;
        }

        &_search {
            margin-top: 4px;
        }

        &_tabs {
            position: relative;

            &::after {
                position: absolute;
                content: '';
                left: -12px;
                right: -12px;
                bottom: 0 px;
                height: 1px;
                background-color: rgba(0, 0, 0, 6%);
            }
        }

        &_content {
            flex: auto;
            overflow: hidden;

            .content_section {
                height: 100%;
                box-sizing: border-box;
                display: none;

                &.active {
                    display: block;
                }
            }
        }
    }

    &_center {
        flex: 0 0 28px;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;

        &_arrow {
            font-size: 12px;
            color: #ccc;
        }
    }

    &_right {
        flex: 0 0 320px;
        height: 440px;
        overflow-y: auto;
        background: #f8f8f8;
        box-sizing: border-box;
        padding: 0 12px;
        display: flex;
        flex-direction: column;

        &_flag {
            line-height: 32px;
            color: #333;
            font-size: 14px;
        }

        &_selected {
            flex: auto;
            overflow-y: auto;
        }
    }


    &_right_selected_list {
        .list_item {
            width: 100%;
            height: 40px;
            display: flex;
            flex-flow: row nowrap;
            column-gap: 8px;
            padding: 0 5px;
            cursor: pointer;
            align-items: center;
            box-sizing: border-box;

            &:hover {
                background-color: #e7eaef;
            }

            .item_typeicon {
                font-size: 12px;
                color: @primaryColor;
            }

            .item_avatar {
                flex: 0 0 24px;
                height: 24px;
                overflow: hidden;
                outline: none;
                border-radius: 50%;
            }

            .item_text {
                flex: auto;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .item_deleteicon {
                font-size: 16px;
                color: #999;

                &:hover {
                    color: @primaryColor;
                }
            }
        }
    }
}